<template>
	<view>
		<!-- 轮播图组件 -->
		<blog-banner></blog-banner>
		<!-- 百年老栈组件 -->
		<blog-statis :articleTotal="articleTotal" :year="year"></blog-statis>
		<!-- 老栈公告组件 -->
		<blog-notice :notice="notice"></blog-notice>
		<!-- 博客类型导航菜单 -->
		<view>
			<scroll-view class="menu-container" scroll-x="true">
				<view
					class="menu-item"
					:class="activeMenu === item.typeId ? 'menu-item-active' : ''"
					v-for="item in blogTypeList"
					:key="item.typeId"
					@click="clickMenu(item.typeId)"
				>
					<text>{{ item.typeName }}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 博客列表 -->
		<blog-list :blog-list="blogList"></blog-list>
		<!-- 没有更多数据了 -->
		<blog-reach-bottom v-if="!hasData"></blog-reach-bottom>
		<!-- 版权 -->
		<copyright></copyright>
	</view>
</template>

<script>
import noticeApi from '@/api/notice.js';
import blogApi from '@/api/blog.js';
import typeApi from '@/api/type.js';
export default {
	data() {
		return {
			articleTotal: 0, // 博客总数
			year: 0, // 百年老栈年限
			notice: {}, // 公告对象
			activeMenu: null, //默认选择的菜单
			blogTypeList: [], // 博客分类列表
			paramPage: {
				// 分页对象
				currentPage: 1,
				pageSize: 10,
				params: {
					// 自定义参数
				}
			},
			blogList: [], // 博客数据
			hasData: true // 是否有数据
		};
	},
	//上拉刷新
	onReachBottom() {
		// 如果有数据
		if(this.hasData) {
			// 有数据，增加一页
			this.paramPage.currentPage = this.paramPage.currentPage + 1;
			// 当前页+1之后，调用
			this.getBlogList();
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.initData();
	},
	watch: {
		blogTypeList: function(newVal, oldVal) {
			this.activeMenu = this.blogTypeList[0].typeId;
		},
		activeMenu: function(newVal, oldVal) {
			this.initData();
		}
	},
	onShow() {
		this.getArticleTotalAndBlogCount();
		this.getNotice();
		this.getBlogTypeList();
		this.getBlogList();
	},
	methods: {
		// 获取百年老栈和博客总数
		getArticleTotalAndBlogCount() {
			blogApi.getCount().then(res => {
				this.articleTotal = res.data;
			});
			const endTime = new Date().getTime();
			const startTime = new Date('2020/06/01').getTime();
			const year = (endTime - startTime) / 1000 / 60 / 60 / 24 / 365;
			this.year = 100 - year.toFixed(0);
		},
		// 获取公告内容
		getNotice() {
			noticeApi.read().then(res => {
				this.notice = res.data;
			});
		},
		// 获取博客分类列表
		getBlogTypeList() {
			typeApi.getList().then(res => {
				this.blogTypeList = res.data;
			});
		},
		// 点击菜单时，切换菜单下标
		clickMenu(index) {
			this.activeMenu = index;
		},
		// 获取博客列表
		getBlogList() {
			this.paramPage.params.typeId = this.activeMenu;
			blogApi.getByPage(this.paramPage).then(res => {
				const dataList = res.data.list;
				if (dataList[0]) {
					this.hasData = true;
					this.blogList.push(...dataList);
				} else {
					// 没数据将hasData改为false
					this.hasData = false;
				}
			});
		},
		// 初始化数据
		initData() {
			this.paramPage = {
				currentPage: 1,
				pageSize: 10,
				params: {
					// 自定义参数
				}
			};
			this.blogList = [];
			this.getBlogList();
			// 关闭下拉刷新
			uni.stopPullDownRefresh();
		}
	}
};
</script>

<style>
@import url('./index.css');
</style>
